<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.0.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/meet.css"/>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap-min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/css/mdui.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script>
    <style>#navbar-default {background-color: #71BD71;}</style>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">



<div data-role="page" id="pageone" style="margin-top: 40px">
    <div id="header" style="height: 13px">
        <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
             style="overflow:hidden;position:fixed;top:0;width:100%;z-index:1002;margin-bottom: 10px;border: 0">
            <div class="row">
                <div class="container-fluid" id="fluid">
                    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                        <a class="navbar-brand" href="/boke/login.jsp"
                           style="padding-left: 3px;">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        </a>
                    </div>
                    <div class="col-lg-10 col-md-10 col-xs-10 col-sm-10" style="position: relative"></div>
                    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style="padding-left: 0px"></div>
                </div>
            </div>
        </nav>
        <br><br>
    </div>
    <ul class="breadcrumb" style="margin-bottom: 2px">
        <li><a href="#">会诊大厅</a></li>
        <li><a href="#">会诊管理</a></li>
        <li class="active">话题社区</li>
    </ul>
    <div class="mdui-col-offset-xs-4">群爱智慧医疗远程诊疗会第九十四期</div>
    <div class="mdui-divider-inset"></div>
    <ul class="mdui-list" mdui-collapse="{accordion: true}">
        <c:forEach items="${commentlist}" var="comment">
            <li class="mdui-collapse-item">
                <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-avatar">
                        <img src="https://cdn.w3cbus.com/mdui/docs~1/static/6f40c42e0eceb58345d3.jpg"/>
                    </div>
                    <div class="mdui-list-item-content">${comment.user.name}
                        <span style="font-size: small;">${comment.createDate}</span>
                        <br>${comment.comment}
                    </div>
                    <i onclick="replay('${comment.sysUserId}','${comment.user.name}')" class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                </div>
                <ul  class="mdui-collapse-item-body mdui-list mdui-list-dense">
                    <c:forEach items="${comment.commentReplayList}" var="commentReplay">
                        <li class="mdui-list-item mdui-ripple">
                            <div class="mdui-list-item-content">${commentReplay.rename}
                                <c:if test="${commentReplay.torepId ne comment.sysUserId}">回复 ${commentReplay.torepname}</c:if>
                                   : ${commentReplay.repcontent}
                            </div>
                            <i onclick="replay('${commentReplay.repId}','${commentReplay.rename}','${comment.id}')" class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
                        </li>
                    </c:forEach>
                    <li id="replayappend${comment.id}" class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-content">
                            <form id="form${comment.id}">
                                <input  id="sysUserId${comment.id}" type="hidden" name="sysUserId" value="${sysUser.id}">
                                <input id="replayUserId${comment.id}" type="hidden" name="replayUserId"  value="${comment.sysUserId}">
                                <input  type="hidden" name="commentId" value="${comment.id}">
                            <input id="replay${comment.id}" name="replayContent" class="mdui-textfield-input" type="text" placeholder="回复 ${comment.user.name}"/>
                            </form>
                        </div>
                        <i onclick="addreplay('${comment.id}','${comment.sysUserId}')" class="mdui-list-item-icon mdui-icon material-icons">check</i>
                    </li>
                </ul>
            </li>
        </c:forEach>

    </ul>

    <%--<c:forEach items="${commentlist}" var="comment">
        ${comment.user.name}评论:${comment.comment} <div class="mdui-divider"></div>
        <c:forEach items="${comment.commentReplayList}" var="commentReplay">
            &nbsp;&nbsp;&nbsp; ${commentReplay.rename}
            <c:if test="${commentReplay.torepId ne comment.sysUserId}">回复: ${commentReplay.torepname}</c:if>
           ${commentReplay.repcontent} <br>
        </c:forEach>
    </c:forEach>--%>
    <div id="commentext" hidden>
            <form id="addComment">
            <input name="sysUserId" value="${sysUser.id}" type="hidden">
            <input name="appointmentId" value="1001" type="hidden">
            <textarea class="mdui-textfield-input" name="comment" placeholder="Description"></textarea>
            </form>
    </div>
</div>

<div class="mdui-fab-wrapper" id="exampleFab">
    <div class="mdui-container">
        <button onclick="addComment()" class="mdui-fab mdui-fab-mini mdui-ripple"><i class="mdui-icon material-icons">brush</i></button>
    </div>
</div>
</body>
<script>

    $(document).ready(function(){
        alert(${sysUser.id});
    })
</script>
<script>
    var replayHtml="";
    function addComment(){
        mdui.prompt('输入评论话题',
            function (value) {
            $('.mdui-textfield-input').val(value);
                var comment=$('#addComment').serialize();
                $.ajax({
                    url:"${pageContext.request.contextPath}/comment/save",
                    data:$('#addComment').serialize(),
                    type:"post",
                    success:function(result){
                        mdui.alert("已提交");
                        location.reload();
                    }});

            },
            /*function (value) {
                mdui.alert('你输入了：' + value + '，点击了取消按钮');
            },*/
            {
                type: 'textarea'
            }
        );
    }

    function replay(repId,rename,commentId){
    $('#replay'+commentId).attr('placeholder','回复 '+rename);
        $('#replay'+commentId).val('');
        $('#replayUserId'+commentId).val(repId);
        $('#replayUserId'+commentId).attr('rep_name',rename);
    }
    function  addreplay(commentId,commentUserId){
        //被回复者姓名,id
        var torename=$('#replayUserId'+commentId).attr('rep_name');
        var torepId=$('#replayUserId'+commentId).val();
        //回复内容
        var content=$('#replay'+commentId).val();
        $.ajax({
            url:"${pageContext.request.contextPath}/commentReplay/save",
            data:$('#form'+commentId).serialize(),
            type:"post",
            success:function(result){
                //动态拼接回复内容
                replayHtml="<li class='mdui-list-item mdui-ripple'>"+
                            "<div class='mdui-list-item-content'>"+"${sysUser.name}";
                if (torepId!=commentUserId){
                    replayHtml+="回复 "+torename;
                }
                replayHtml+=":"+content+"</div>" +
                    "<i onclick=replay('${sysUser.id}','${sysUser.name}','"+commentId+"')"
                    +" class='mdui-list-item-icon mdui-icon material-icons'>chat_bubble</i></li>"
                $('#replayappend'+commentId).before(replayHtml);

               // location.reload();
            }});
    }


</script>
<script>
</script>
</html>
